import React from 'react'
import { Tree,message } from 'antd'

const TreeNode = Tree.TreeNode
const treeData = [{
    title: '0-0',
    key: '0-0',
    children: [{
        title: '0-0-0',
        key: '0-0-0',
        children: [
            { title: '0-0-0-0', key: '0-0-0-0',isLeaf:true },
            { title: '0-0-0-1', key: '0-0-0-1',isLeaf:true},
            { title: '0-0-0-2', key: '0-0-0-2',isLeaf:true },
        ],
    }, {
        title: '0-0-1',
        key: '0-0-1',
        children: [
            { title: '0-0-1-0', key: '0-0-1-0',isLeaf:true },
            { title: '0-0-1-1', key: '0-0-1-1',isLeaf:true },
            { title: '0-0-1-2', key: '0-0-1-2',isLeaf:true },
        ],
    }, {
        title: '0-0-2',
        key: '0-0-2',
    }],
}, {
    title: '0-1',
    key: '0-1',
    children: [
        { title: '0-1-0-0', key: '0-1-0-0',isLeaf:true },
        { title: '0-1-0-1', key: '0-1-0-1',isLeaf:true },
        { title: '0-1-0-2', key: '0-1-0-2',isLeaf:true },
    ],
}, {
    title: '0-2',
    key: '0-2',
    isLeaf:true
}]
class Trees extends React.Component{
    state = {
        expandedKeys: ['0-0-0', '0-0-1'],
        autoExpandParent: true,
        checkedKeys: ['0-0-0'],
        selectedKeys: [],
    }


    onExpand = (expandedKeys) => {
        console.log('onExpand', expandedKeys);
        this.setState({
            expandedKeys,
            autoExpandParent: false,
        })
    }
    onCheck = (checkedKeys) => {
        console.log('onCheck----------', checkedKeys);
        this.setState({ checkedKeys });
    }

    onSelect = (selectedKeys, info) => {
        console.log('onSelect----------', info);
        this.setState({ selectedKeys });
    }
    renderTreeNodes = (data) => {
        return data.map((item) => {
            if (item.children) {
                return (
                    <TreeNode title={item.title} key={item.key} dataRef={item}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                )
            }
            return <TreeNode {...item} />;
        })
    }
    render(){
        return (
            <div>
                <div>
                    <Tree
                        showLine
                        checkable
                        onExpand={this.onExpand}
                        expandedKeys={this.state.expandedKeys}
                        autoExpandParent={this.state.autoExpandParent}
                        onCheck={this.onCheck}
                        checkedKeys={this.state.checkedKeys}
                        onSelect={this.onSelect}
                        selectedKeys={this.state.selectedKeys}
                    >
                        {this.renderTreeNodes(treeData)}
                    </Tree>

                    <button onClick={()=>{
                        message.info(`${this.state.checkedKeys}`)
                        // alert(this.state.selectedKeys)
                    }}>测试</button>

                    <p>checkedKeys: ['0-0-0']这个设置,官方这个设置是为了省事，实际上选中的时候连下面的子菜单应一起选中</p>
                </div>

                <div>
                    <Tree.DirectoryTree
                        checkable
                        multiple
                        onExpand={this.onExpand}
                        expandedKeys={this.state.expandedKeys}
                        autoExpandParent={this.state.autoExpandParent}
                        onCheck={this.onCheck}
                        checkedKeys={this.state.checkedKeys}
                        onSelect={this.onSelect}
                        selectedKeys={this.state.selectedKeys}
                    >
                        {this.renderTreeNodes(treeData)}
                    </Tree.DirectoryTree>

                    <button onClick={()=>{
                        message.info(`${this.state.checkedKeys}`)
                        // alert(this.state.selectedKeys)
                    }}>测试</button>

                    <p>checkedKeys: ['0-0-0']这个设置,官方这个设置是为了省事，实际上选中的时候连下面的子菜单应一起选中</p>
                </div>

            </div>
        )
    }
}

export default Trees
